<template>
	<view class="select-ex">
		<text class="tips">
			<text class="name">嗨，{{studentInfo.name}}</text><br>
		选择一位重要他人，成长道路不孤单~</text>
		<view class="ex-list">
			
			<view class="ex-item" @click="createEx()">
				<text class="add">+</text>
				<view class="name">自己创建</view>
			</view>
			<view class="ex-item" v-for="(item, i) in examineExample" :key="item.id" @click="seeExample(item.id)">
				<image :src="api.xiaodeObsUrl+item.pictureUrl" mode="aspectFill"></image>
				<view class="name">{{item.name}} <text>(待审核)</text></view>
			</view>
			<view class="ex-item" v-for="(item, i) in exampleList" :key="item.id" @click="seeExample(item.id, item.name)">
				<image :src="api.xiaodeObsUrl+item.pictureUrl" mode="aspectFill"></image>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		<uni-load-more :status="more"></uni-load-more>
	</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
	components: {
		uniLoadMore
	},
    data() {
        return {
			studentInfo: getApp().globalData.userInfo || {},
			page: 1,
			exampleList: [],
			examineExample: [],
			more: 'more',
        }   
    },
	onShow(){
		this.page = 1;
		this.exampleList = []
		this.getExample()
	},
	onReachBottom(){
		if(this.more == 'no-more') return;
		this.page++;
		this.getExample()
	},
	methods:{
		getExample(){
			this.more = 'loading';
			this.api.get('sExample/exhibitExamplePage', {
				curPage: this.page,
				pageSize: 20
			}).then(res=>{
				if(res.data.state!='ok') {
					this.more = 'no-more'
					return;
				};
				let list = res.data.exhibitExamplePage.list;
				this.exampleList = this.exampleList.concat(list);
				this.studentInfo = getApp().globalData.userInfo || {}
				this.examineExample = res.data.examineExampleList || this.examineExample;
				if(list.length<20){
					this.more = 'no-more';
				}
			})
		},
		seeExample(id, name){
			let bindExamId = ''
			if(this.examineExample.length>0){
				bindExamId = this.examineExample[0].id;
			}
			if(bindExamId){
				uni.navigateTo({
					url: '/pages/student/example-details?id='+id+'&bindExamId='+bindExamId
				})
			}else{
				uni.navigateTo({
					url: '/pages/student/create-example?id='+id
				})
			}
			
		},
		
		createEx(){
			uni.navigateTo({
				url: '/pages/student/create-example'
			})
		}
	}
}
</script>
<style lang="less">
	.select-ex{
		padding-top: 24rpx;
		// display: flex;
		// flex-direction: column;
		// justify-content: center;
		// height: 100vh;
		.tips{
			display: block;
			margin: 24rpx 0 48rpx;
			text-align: center;
		}
		.name{
			font-weight: bold;
			font-size: 32rpx;
			margin-right: 8rpx;
		}
		.ex-list{
			// margin-top: 40rpx;
			padding: 0 32rpx;
		}
		.ex-item{
			display: inline-block;
			text-align: center;
			width: 33.3%;
			margin-bottom: 40rpx;
			font-size: 0;
			.add{
				display: inline-block;
				border: 2rpx solid #e4e4e4;
				font-size: 96rpx;
				text-align: center;
				line-height: 180rpx;
				color: #aaaaaa;
			}
			image, .add{
				width: 180rpx;
				height: 180rpx;
				border-radius: 16rpx;
			}
			.name{
				margin-top: 16rpx;
				font-size: 24rpx;
				text{
					font-size: 20rpx;
					color: #55acee;
				}
			}
		}
	}
</style>